<script setup>
import { ref } from 'vue';
import { listApi } from '@/api/sys/log-operation';
import { useRequest } from '@/hooks/pages-repeat';

defineOptions({
  name: 'sys-log-operation'
})

const { 
  requestInit, 
  requestObj, 
  pagination,
  getDataList,
  exportExcal,
}  = useRequest()
requestInit({
  isPage: true,
  listApi,
  exportURL: '/sys/log/operation/export',
  query: {
    page: 1,
    limit: 20,
    status: undefined
  }
})

const statusList = ref([
  {
    text: '失败',
    value: 0
  },
  {
    text: '成功',
    value: 1
  }
])
const columns = ref([
  {
    title: '用户名',
    dataIndex: 'creatorName',
  },
  {
    width: 150,
    title: '用户操作',
    dataIndex: 'operation',
  },
  {
    width: 200,
    title: '请求URL',
    dataIndex: 'requestUri',
    ellipsis: true
  },
  {
    title: '请求方式',
    dataIndex: 'requestMethod',
  },
  {
    width: 200,
    title: '请求参数',
    dataIndex: 'requestParams',
    ellipsis: true
  },
  {
    title: '请求时长',
    dataIndex: 'requestTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '操作IP',
    dataIndex: 'ip',
  },
  {
    width: 200,
    title: '用户代理',
    dataIndex: 'userAgent',
    ellipsis: true
  },
  {
    width: 200,
    title: '创建时间',
    dataIndex: 'createDate'
  }
])

</script>

<template>
  <div class="container">
    <a-row :gutter="20" wrap>
      <a-col :span="3">
        <a-select
          ref="select"
          v-model:value.trim="requestObj.query.status"
          style="width: 100%"
          placeholder="状态"
          allowClear
        >
          <a-select-option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.text }}</a-select-option>
        </a-select>
      </a-col>

      <a-col :span="3">
        <a-space>
          <a-button @click="getDataList()">查询</a-button>
          <a-button @click="exportExcal">导出</a-button>
        </a-space>
      </a-col>
    </a-row>

    <a-table 
      class="table-common"
      :columns="columns" 
      :data-source="requestObj.dataList" 
      rowKey="id" 
      bordered
      :pagination="requestObj.isPage ? pagination : false"
      :loading="requestObj.dataLoading"
      :scroll="{ x: 1400, y: 580 }"
      @change="getDataList"
      >
      <template #bodyCell="{ column, record }">

        <template v-if="column.dataIndex==='status'">
          <a-tag v-if="record.status === 0" color="red">失败</a-tag>
          <a-tag v-else color="green">成功</a-tag>
        </template>
      </template>

      <template #emptyText>
        <a-empty :description="requestObj.emptyText" />
      </template>
    </a-table>
  </div>
</template>

<style lang="scss" scoped>

</style>